<template>
  <div class="menu2">
    <!-- 顶部搜索区域 -->
    <el-card>
      <el-form v-model="searchDate" ref="searchRef" label-width="100px" class="demo-ruleForm">
        <el-row class="demo-ruleForm-row">
          <el-col :span="6">
            <el-form-item label="分包编号" prop="subcontract">
              <el-input placeholder="请输入分包编号" v-model="searchDate.subcontract" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分标项目名称" prop="subcontracted">
              <el-input placeholder="请输入分标项目名称" v-model="searchDate.subcontracted" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="参投单位" prop="company_name">
              <el-input placeholder="请输入参投单位" v-model="searchDate.company_name" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="包名称" prop="package_name">
              <el-input placeholder="请输入包名称" v-model="searchDate.package_name" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row  class="demo-ruleForm-row">
          <el-col :span="4" >
            <div class="search_col">
              <el-button type="primary" size="mini" icon="el-icon-search">搜索</el-button>
              <el-button type="primary" size="mini" icon="el-icon-refresh" @click="resetForm">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 卡片视图区域 -->
    <el-card>
      <div class="left">
        <el-button type="primary" size="mini" icon="el-icon-upload" @click="upDialogVisible = true">导入</el-button>
        <!-- <el-button icon="el-icon-folder-opened" type="primary" size="mini" @click="upDialogVisible = true">导入报名表</el-button>
        <el-button icon="el-icon-folder-opened" type="primary" size="mini" @click="upDialogVisible = true">导入供应商表</el-button>
        <el-button icon="el-icon-folder-opened" type="primary" size="mini" @click="upDialogVisible = true">导入供应商报价表</el-button> -->
      </div>
      <el-table :data="tableData" :row-class-name="tableRowClassName" 
      style="width: 100%" border
      :header-cell-style="{
          'background-color': '#CBD9EC',
          color: '#fff',
          'font-weight': '400',
      }"
      @selection-change="handleSelectionChange"
      @sort-change="onSortChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="序号" width="75" type="index"></el-table-column>
        <el-table-column prop="name" label="招标项目名称" width="260"></el-table-column>
        <el-table-column prop="subcontract" label="分包编号" width="240"> </el-table-column>
        <el-table-column prop="package_name" label="包名称（部位）"></el-table-column>
        <el-table-column prop="subcontracted" label="分标项目名称"> </el-table-column>
        <el-table-column prop="company_name" label="参投单位" width="120"> </el-table-column>
        <el-table-column prop="offer" label="最终报价(万元)" width="120"> </el-table-column>
        <el-table-column prop="approve" label="最终折扣" width="120"> </el-table-column>
        <el-table-column prop="prize" label="是否中标" width="120"> </el-table-column>
        <el-table-column prop="winning" label="中标金额(万元)"> </el-table-column>
        <el-table-column propp="server" label="应收中标服务费(元)" width="120"> </el-table-column>
        <el-table-column prop="servers" label="实收收中标服务费(元)" width="120"> </el-table-column>
        <el-table-column prop="price" label="应收保证金（标书规定缴纳金额）(元)" 
        sortable="custom" :sort-orders="['ascending','descending']" width="150"> </el-table-column>
        <el-table-column prop="ensure" label="实收保证金(元)"> </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="detailsClick(scope.$index, scope.row)">详情</el-button>
            <el-button type="danger" size="mini" @click="deleteClick(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <!-- 上传弹框 -->
    <el-dialog title="项目数据上传" :visible.sync="upDialogVisible" width="60%" @close="upDialogVisibleClosed">
      <!-- 步骤条 -->
      <el-steps :active="activeIndex - 0" finish-status="success" simple style="margin-top: 20px">
        <el-step title="步骤 1" >导入开标预览表</el-step>
        <el-step title="步骤 2" >导入标书获取预览表</el-step>
        <el-step title="步骤 3" >导入供应商联系人表</el-step>
      </el-steps>

      <!-- tab栏 -->
      <el-tabs v-model="activeIndex" tab-position="left" 
       :before-leave="beforeTabLeave" @tab-click="tabClicked">
        <el-tab-pane class="el-tabs-item" label="导入开标预览表" name="0" :disabled="pane1">
           <el-form :model="form">
            <el-form-item :label-width="formLabelWidth">
              <el-upload class="upload-demo"
              :before-upload="beforeUploadFile"
              ref="uploadExcel1" :auto-upload="false" :on-error="errorFile" :on-remove="removeFile" :on-change="fileChange" :on-success="handleSuccess1" :action='actionURl' drag name="fileName" >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip"></div>
              </el-upload>
            </el-form-item>
            <el-form-item class="right">
              <el-button  @click="upDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitUpload1()">确 定</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="导入标书获取预览表" name="1" :disabled="pane2">
           <el-form :model="form">
            <el-form-item  :label-width="formLabelWidth">
              <el-upload class="upload-demo"
              :before-upload="beforeUploadFile"
              ref="uploadExcel2" :auto-upload="false" :on-remove="removeFile" :on-change="fileChange" :on-success="handleSuccess2" :action='actionURl2' drag name="fileName" >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传2</em></div>
                <div class="el-upload__tip" slot="tip"></div>
              </el-upload>
            </el-form-item>
            <el-form-item class="right">
              <el-button  @click="upDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitUpload2()">确 定</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="导入供应商联系人表" name="2">
           <el-form :model="form">
            <el-form-item  :label-width="formLabelWidth">
              <el-upload class="upload-demo"
              :before-upload="beforeUploadFile"
              ref="uploadExcel3" :auto-upload="false" :on-remove="removeFile" :on-change="fileChange" :on-success="handleSuccess3" :action='actionURl3' drag name="fileName" >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传3</em></div>
                <div class="el-upload__tip" slot="tip"></div>
              </el-upload>
            </el-form-item>
            <el-form-item class="right">
              <el-button  @click="upDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitUpload3()">确 定</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button  @click="upDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload()">确 定</el-button>
      </span> -->
    </el-dialog>

    <!-- 上传弹框
    <el-dialog title="表格数据上传" :visible.sync="upDialogVisible" width="60%" @close="upDialogVisibleClosed">
      <el-form :model="form">
       <el-form-item label="上传文件"  :label-width="formLabelWidth">
        <el-upload class="upload-demo"
        :before-upload="beforeUploadFile"
         ref="uploadExcel" :auto-upload="false" :on-remove="removeFile" :on-change="fileChange" :on-success="handleSuccess" :action='actionURl' drag name="fileName" >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip"></div>
        </el-upload>  
       </el-form-item>
     </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button  @click="upDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitUpload()">确 定</el-button>
        </span>
    </el-dialog> -->
    
    <!-- 详情弹框 -->
    <el-dialog title="数据详情" :visible.sync="detailsDialogVisible" width="90%">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="one">
        <el-tab-pane label="开票信息" name="first">
          <el-table :data="invoiceData" stripe style="width: 100%" border>
            <el-table-column prop="company_name" label="参投单位" width="180"> </el-table-column>
            <el-table-column prop="contacts" label="厂商联系人"> </el-table-column>
            <el-table-column prop="phone" label="手机"> </el-table-column>
            <el-table-column prop="award" label="中标通知书代理机构留存情况"> </el-table-column>
            <el-table-column prop="letter" label="中标通知书厂家领取情况"> </el-table-column>
            <el-table-column prop="employer" label="中标通知书业主单位"> </el-table-column>
            <el-table-column prop="acceptance" label="中标通知书需求部门"> </el-table-column>
            <el-table-column prop="address" label="厂家邮寄地址"> </el-table-column>
            <el-table-column prop="remarks" label="备注"> </el-table-column>
            <!-- <el-table-column label="操作" width="220">
              <template>
                <el-button type="primary" size="mini">增加</el-button>
                <el-button type="warning" size="mini">修改</el-button>
                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-table-column> -->
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="公司管理" name="second">
          <el-table :data="companyData" border style="width: 100%">
            <el-table-column prop="dates" label="保证金/中标服务费缴纳时间" width="180"> </el-table-column>
            <el-table-column prop="amount" label="应退还保证金额(元)"> </el-table-column>
            <el-table-column prop="fee" label="实收标书费(元)"> </el-table-column>
            <el-table-column prop="Invoicing" label="开票/申请开票情况"> </el-table-column>
            <el-table-column prop="requested" label="申请开票金额"> </el-table-column>
            <!-- <el-table-column prop="Invoices" label="申请开票金额"> </el-table-column> -->
            <el-table-column prop="amountes" label="已开票金额(元)"> </el-table-column>
            <el-table-column prop="uninvoiced" label="未开票金额(元)"> </el-table-column>
            <el-table-column prop="information" label="开票信息"> </el-table-column>
            <el-table-column prop="examine" label="审核"> </el-table-column>
            <!-- <el-table-column label="操作" width="220">
              <template>
                <el-button type="primary" size="mini">增加</el-button>
                <el-button type="warning" size="mini">修改</el-button>
                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-table-column> -->
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {  
      query: {
        id: ''
      },
      actionURl: '',
      actionURl2: '',
      actionURl3: '',
      // 搜索数据
      searchDate: {
        subcontract: '',
        company_name: '',
        package_name: '',
        subcontracted: '',
      },

      // 导入数据区域
      // 类名
      formLabelWidth: '80px',
      // form表单绑定对象
      form: {
        file: []
      },

      // 表格数据
      tableData: [],
      
      // 导出数据
      checkboxList: [],

      // 控制上传弹框的显示隐藏
      upDialogVisible: false,
      // 上传
      fileList: [],
      // tab默认选中项
      activeIndex: '0',
      // 导入报名表项是否禁用
      pane1: false,
      pane2: false,
      // 详情弹框数据区域
      // 控制详情数据的显示与隐藏
      detailsDialogVisible: false,
      companyData: {},
      // 公司管理数据
      invoiceData: {},
      // tab栏默认选中项
      activeName: 'first',

      // 分页
      page: {
        // 每页显示数据条数
        size: 5,
        // 当前页码值
        counm: 1,
      },
      // 总数据条数
      total: 5,

      spanArr: [],
      position: ''
    }
  },
  methods: {
    // 
    // 表格排序事件处理函数
    // @param {object} {column,prop,order} 列数据|排序字段|排序方式
    onSortChange({ prop, order }) {
        this.tableData.sort(this.compare(prop,order));
    },
    // 排序比较
    // @param {string} propertyName 排序的属性名
    // @param {string} sort ascending(升序)/descending(降序)
    // @return {function}
    compare (propertyName, sort) {
        return function (obj1, obj2) {
            var value1 = obj1[propertyName]
            var value2 = obj2[propertyName]
            if (typeof value1 === 'string' && typeof value2 === 'string') {
                const res = value1.localeCompare(value2, 'zh')
                return sort === 'ascending' ? res : -res
            } else {
                if (value1 <= value2) {
                    return sort === 'ascending' ? -1 : 1
                } else if (value1 > value2) {
                    return sort === 'ascending' ? 1 : -1
                }
            }
        }
    },

    //  获取列表数据
    async getList() {
      const {data : res} = await axios({
        method:"POST",
        url:"http://192.168.5.197:8040/projectDetails/pageProjectDetails",
        headers:{
         'Content-Type': 'application/json;charset=UTF-8',
          type: 'List',
        },
        data:this.page
      }); 
      console.log(res);
      if (res.code !== 1000) {
       return this.$message.error('获取接口失败!!!');
      }
      this.tableData = res.data.data;
      this.total = res.count;
    },


    // 全选
    handleSelectionChange(val) {
      this.checkboxList = val;
      console.log(this.checkboxList);
    },

    // 隔行变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },

    // 重置事件
    resetForm() {
      this.searchDate.account = '';
      this.searchDate.name = '';
    },

    // 文件上传成功时的钩子
    handleSuccess1(res, file, fileList) {
      console.log(res);
      if(res.code != 1000) {
        this.$message.error('文件上传失败！')      
      } else {
        this.form.file = [];
        this.$notify.success({
          title: '成功',
          message: `文件上传成功`
        });
        this.activeIndex = '1';
        // this.upDialogVisible = false
      }
      
    },
    handleSuccess2(res, file, fileList) {
      console.log(res);
      if(res.code != 1000) {
        this.$message.error('文件上传失败！')
      } else {
        this.form.file = [];
        this.$notify.success({
          title: '成功',
          message: `文件上传成功`
        });
        this.activeIndex = '2';
      // this.upDialogVisible = false
      }
      
    },
    handleSuccess3(res, file, fileList) {
      console.log(res);
      if(res.code != 1000) {
        this.$message.error('文件上传失败！')
      } else {
        this.form.file = [];
        this.$notify.success({
          title: '成功',
          message: `文件上传成功`
        });
        // this.upDialogVisible = false
      }
     
    },
    // 上传失败的钩子函数
    errorFile(err, file, fileList) {
      console.log(err);
    },
    // 文件状态改变时的钩子
    fileChange(file, fileList) {
      // console.log(fileList);
      // console.log('change')
      // console.log(file)
      for(var i = 0; i < fileList.length; i++) {
        this.form.file[i] = file.raw
      }
      // console.log(this.form.file)
      // console.log(fileList)
    },
     // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile(file) {
      // this.form.file = file
      // console.log('before upload')
      // console.log(file)
      let extension = file.name.substring(file.name.lastIndexOf('.')+1)
      let size = file.size / 1024 / 1024
      if(extension !== 'xlsx') {
        this.$notify.warning({
          title: '警告',
          message: `只能上传Excel2017（即后缀是.xlsx）的文件`
        });
        return false;
      }
      if(size > 10) {
        this.$notify.warning({
          title: '警告',
          message: `文件大小不得超过10M`
        });
        return false;
      }
    },
    // 删除文件事件
    removeFile(file, fileList) {
      // console.log(fileList);
      
      this.form.file = []; 
      for(var i = 0; i < fileList.length; i++) {
        this.form.file[i] = fileList[i].raw
      }
      // console.log(this.form.file);
      // console.log(fileList);
    },
    // 导入报名表上传确认事件
    submitUpload1() {
      if(this.form.file.length == 0) {
        this.$message.info('您还未选择上传文件');
        return;
      }
      this.$refs.uploadExcel1.submit();
      // let formData = new FormData()
      // formData.append('fileName', this.form.file);
      // console.log(this.form.file);
      // console.log(this.formData);
      // axios.post('http://192.168.5.197:8040/PM/fileUpload', 
      //   formData,
      //   { "Content-Type": "multipart/form-data" }
      // )
      // .then(res => {
      //   console.log('res')
      //   console.log(res)
      // })
      // .catch(err => {
      // })
    },
    // 导入供应商表上传确认事件
    submitUpload2() {
      if(this.form.file.length == 0) {
        this.$message.info('您还未选择上传文件');
        return;
      }
      this.$refs.uploadExcel2.submit();
      // let formData = new FormData()
      // formData.append('fileName', this.form.file);
      // console.log(this.form.file);
      // console.log(this.formData);
      // axios.post('http://192.168.5.197:8040/PM/fileUpload', 
      //   formData,
      //   { "Content-Type": "multipart/form-data" }
      // )
      // .then(res => {
      //   console.log('res')
      //   console.log(res)
      // })
      // .catch(err => {
      // })
    },
    // 导入供应商报价表上传确认事件
    submitUpload3() {
      if(this.form.file.length == 0) {
        this.$message.info('您还未选择上传文件');
        return;
      }
      this.$refs.uploadExcel3.submit();
      // let formData = new FormData()
      // formData.append('fileName', this.form.file);
      // console.log(this.form.file);
      // console.log(this.formData);
      // axios.post('http://192.168.5.197:8040/PM/fileUpload', 
      //   formData,
      //   { "Content-Type": "multipart/form-data" }
      // )
      // .then(res => {
      //   console.log('res')
      //   console.log(res)
      // })
      // .catch(err => {
      // })
    },
    // 监听上传弹框的显示与隐藏
    upDialogVisibleClosed() {
      this.$refs.uploadExcel1.clearFiles();
      this.$refs.uploadExcel2.clearFiles();
      this.$refs.uploadExcel3.clearFiles();
    },

     // table标签页发生变化是会触发这个函数
    beforeTabLeave(activeName, oldActiveName) {
      // // 即将离开的标签页：oldActiveName, 即将进入的标记页：activeName
      // console.log(oldActiveName);
      // console.log(activeName);
      // if (oldActiveName == 0 && activeName > 0) {
      //   this.$message.error('')
      //   return false
      // }
      // if(this.activeIndex == '1' || this.activeIndex == '2') {
      //   this.pane1 = true;
      //   if(this.activeIndex === '2') {
      //     this.pane2 = true
      //   }
      // }
    },
    // 选中不同的标签页触发该函数发送网络请求
    async tabClicked() {
      // console.log(this.activeIndex);
    },
    

    // 详情事件区域
    // 点击详情事件触发
    detailsClick(index, row) {
      // console.log(row)
      this.companyData = row.children
      this.companyData.index = index
      // console.log(this.companyData)

      this.invoiceData = row.list
      this.invoiceData.index = index
      // console.log(this.invoiceData)
      this.detailsDialogVisible = true
    },
    // tab栏选中项改变时触发
    handleClick(tab, event) {
      // console.log(tab, event)
    },

    // 每页显示数据条数发生变化时触发
    handleSizeChange(newSize) {
      // console.log(newSize);
    },
    // 页码值发生变化时触发
    handleCurrentChange(newPage) {
      // console.log(newPage);
    },

     // 点击删除事件
    async deleteClick(id) {
      const confirmResult = await this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(err => err);
      console.log(confirmResult);
      // confirmResult 等于 confirm，则表示用户确认删除
      if(confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除！');
      }
      // 发送请求 
      const {data : res} = await axios({
        method:"POST",
        url:"http://192.168.5.197:8040/projectDetails/removeProjectDetails/"+id,
        headers:{
          'Content-Type': 'application/json;charset=UTF-8',
          type: 'List',
        }
      }); 
      console.log(res);
      if(res.code == 1000) {
        this.$message.success(res.msg);
        // 更新数据
        this.getList();
      } else {
        this.$message.error(res.msg);
      } 
    },
    //   async deleteClick(id) {
    //     this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning',
    //     }).then(async() => {
    //       // 发送请求 
    //       const {data : res} = await axios({
    //         method:"POST",
    //         url:"http://192.168.5.197:8040/projectDetails/removeProjectDetails/"+id,
    //         headers:{
    //          'Content-Type': 'application/json;charset=UTF-8',
    //           type: 'List',
    //         }
    //       }); 
    //       console.log(res);
    //       if(res.code == 1000) {
    //         this.$message.success(res.msg);
    //         // 更新数据
    //         this.getList();
    //       } else {
    //         this.$message.error(res.msg);
    //       } 
    //     })
    //   }
  },
  created () {
    this.getList();
    if(this.$route.query) {
      this.query.id = this.$route.query.id;
      this.actionURl = 'http://192.168.5.197:8040/openTender/openTenderAnalysis/' + this.query.id;
      this.actionURl2 = 'http://192.168.5.197:8040/tender/tenderAnalysis/'+this.query.id;
      this.actionURl3 = 'http://192.168.5.197:8040/supplier/supplierAnalysis/'+this.query.id;
    }
    console.log(this.query.id);
    console.log(this.actionURl);
    console.log(this.actionURl2);
    console.log(this.actionURl3);
  }
}
</script>

<style scoped>
.menu2{
  padding: 20px;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}

.right p {
  font-size: 18px;
  font-weight: 800;
}
.boxo{
  margin:0 auto;
}
.ipt{
  width:220px;
}
.el-tabs {
  margin-top: 30px;
}
</style>